<template>
  <div>
      <div class="app-header">
          <div class="header">
              <img src="../assets/logo.png">
              <div class="header-nav">
                  <ul class="nav-list">
                      <li>登录</li>
                      <li class="list-pie">|</li>
                      <li>注册</li>
                      <li class="list-pie">|</li>
                      <li>关于</li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="app-content">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
      </div>
      <div class="app-footer">
          <p>©2018 lauwen CHINA.</p>
      </div>
  </div>
</template>

<script>
    export default{
        name:'hello',
        data(){
            return{
            }
        },

    }
</script>

<style>
    body{
      padding:0px;
      margin:0px;
      background-color: #f5f5f5;
    }
    .header{
        width: 100%;
        height:60px;
        background-color: #333333;
    }
    .header img{
        width:50px;
        height: 50px;
        margin-top: 5px;
        margin-left: 20px;
        float: left;
    }
    .nav-list{
        float: right;
        color: #aaa;
        margin-right: 20px;
    }
    .list-pie{
        margin: 0px 5px;
    }
    .nav-list li{
        list-style: none;
        float: left;
    }
    .app-footer{
        width: 100%;
        height: 45px;
        background-color: #eee;
        float: left;
    }
    .app-footer p{
        text-align: center;
        line-height: 45px;
        margin: 0px;
        font-size: 12px;
    }

</style>
